<template>
	<div class="body">
		<header>
			<div>
				<section class="panel p20">
					<div class="df">
						<div class="mr15"><label class="tit">日期：</label><label><label class="f13"
									style="visibility: hidden; position: absolute; top: -1000px; left: -1000px;">2022年08月20日</label><span>
									<div role="tooltip" id="el-popover-7050" aria-hidden="true"
										class="el-popover el-popper single" tabindex="0"
										style="width: 600px; display: none;">
										<!---->
										<div class="el-tabs el-tabs--top">
											<div class="el-tabs__header is-top">
												<div class="el-tabs__nav-wrap is-top">
													<div class="el-tabs__nav-scroll">
														<div role="tablist" class="el-tabs__nav is-top"
															style="transform: translateX(0px);">
															<div class="el-tabs__active-bar is-top"
																style="width: 0px; transform: translateX(0px);"></div>
															<div id="tab-Day" aria-controls="pane-Day" role="tab"
																aria-selected="true" tabindex="0"
																class="el-tabs__item is-top is-active">按日</div>
														</div>
													</div>
												</div>
											</div>
											<div class="el-tabs__content">
												<div role="tabpanel" id="pane-Day" aria-labelledby="tab-Day"
													class="el-tab-pane">
													<section class="calendar-wrap"></section>
												</div>

											</div>
										</div>
										<div class="bdt tar pt10"><button type="button"
												class="el-button mr20 gray f13 el-button--text el-button--mini">
												<!----><span>取消</span>
											</button><button type="button"
												class="el-button mr10 el-button--primary el-button--mini">
												<!----><span>确定</span>
											</button></div>
									</div><span class="el-popover__reference-wrapper">
										<div class="el-input el-input--small el-input--suffix el-popover__reference"
											aria-describedby="el-popover-7050" tabindex="0" style="width: 140px;">
											<!----><input type="text" autocomplete="off" placeholder="请选择"
												class="el-input__inner">
											<!----><span class="el-input__suffix"><span
													class="el-input__suffix-inner"><i
														class="el-input__icon el-icon-arrow-down"></i>
												</span>
											</span>
										</div>
									</span>
								</span></label>
						</div>
						<div class="mr15"><label class="tit">场次：</label>
							<div class="el-select el-select--small" style="width: 100px;">
								<!---->
								<div class="el-input el-input--small el-input--suffix">
									<!----><input type="text" readonly="readonly" autocomplete="off" placeholder="全部"
										class="el-input__inner">
									<!----><span class="el-input__suffix"><span class="el-input__suffix-inner"><i
												class="el-select__caret el-input__icon el-icon-arrow-up"></i>
										</span>
									</span>
								</div>
								<div class="el-select-dropdown el-popper" style="display: none; min-width: 100px;">
									<div class="el-scrollbar" style="">

										<div class="el-scrollbar__bar is-horizontal">
											<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
										</div>
										<div class="el-scrollbar__bar is-vertical">
											<div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
										</div>
									</div>
									<!---->
								</div>
							</div>
						</div>
						<div class="mr15"><label class="tit">地区：</label>
							<!----><label><label class="f13"
									style="visibility: hidden; position: absolute; top: -1000px; left: -1000px;"></label><span>
									<div role="tooltip" id="el-popover-7178" aria-hidden="true"
										class="el-popover el-popper" tabindex="0" style="width: 340px; display: none;">
										<!---->
										<div class="el-tabs el-tabs--top">
											<div class="el-tabs__header is-top">
												<div class="el-tabs__nav-wrap is-top">
													<div class="el-tabs__nav-scroll">
														<div role="tablist" class="el-tabs__nav is-top"
															style="transform: translateX(0px);">

														</div>
													</div>
												</div>
											</div>
											<div class="el-tabs__content">
												<div role="tabpanel" id="pane-Level" aria-labelledby="tab-Level"
													class="el-tab-pane">
													<div class="year-wrap w100">
														<div class="scrollbar el-scrollbar">
															<div class="el-scrollbar__wrap"
																style="margin-bottom: -17px; margin-right: -17px;">

															</div>
															<div class="el-scrollbar__bar is-horizontal">
																<div class="el-scrollbar__thumb"
																	style="transform: translateX(0%);"></div>
															</div>
															<div class="el-scrollbar__bar is-vertical">
																<div class="el-scrollbar__thumb"
																	style="transform: translateY(0%);"></div>
															</div>
														</div>
													</div>
												</div>
												<div role="tabpanel" aria-hidden="true" id="pane-Region"
													aria-labelledby="tab-Region" class="el-tab-pane"
													style="display: none;">
													<div class="year-wrap w100">
														<div class="scrollbar el-scrollbar">
															<div class="el-scrollbar__wrap"
																style="margin-bottom: -17px; margin-right: -17px;">

															</div>
															<div class="el-scrollbar__bar is-horizontal">
																<div class="el-scrollbar__thumb"
																	style="transform: translateX(0%);"></div>
															</div>
															<div class="el-scrollbar__bar is-vertical">
																<div class="el-scrollbar__thumb"
																	style="transform: translateY(0%);"></div>
															</div>
														</div>
													</div>
												</div>
												<div role="tabpanel" aria-hidden="true" id="pane-Province"
													aria-labelledby="tab-Province" class="el-tab-pane"
													style="display: none;">
													<div class="year-wrap w100">
														<div class="scrollbar el-scrollbar">
															<div class="el-scrollbar__wrap"
																style="margin-bottom: -17px; margin-right: -17px;">

															</div>
															<div class="el-scrollbar__bar is-horizontal">
																<div class="el-scrollbar__thumb"
																	style="transform: translateX(0%);"></div>
															</div>
															<div class="el-scrollbar__bar is-vertical">
																<div class="el-scrollbar__thumb"
																	style="transform: translateY(0%);"></div>
															</div>
														</div>
													</div>
												</div>
												<div role="tabpanel" aria-hidden="true" id="pane-City"
													aria-labelledby="tab-City" class="el-tab-pane"
													style="display: none;">
													<div class="week-wrap w100 el-row">
														<div class="el-col el-col-9">
															<div class="scrollbar el-scrollbar">
																<div class="el-scrollbar__wrap"
																	style="margin-bottom: -17px; margin-right: -17px;">

																</div>
																<div class="el-scrollbar__bar is-horizontal">
																	<div class="el-scrollbar__thumb"
																		style="transform: translateX(0%);"></div>
																</div>
																<div class="el-scrollbar__bar is-vertical">
																	<div class="el-scrollbar__thumb"
																		style="transform: translateY(0%);"></div>
																</div>
															</div>
														</div>
														<div class="el-col el-col-15"></div>
													</div>
												</div>
											</div>
										</div>
									</div><span class="el-popover__reference-wrapper">
										<div class="curp el-input el-input--small el-input--suffix el-popover__reference"
											aria-describedby="el-popover-7178" tabindex="0" style="width: 100px;">
											<!----><input type="text" autocomplete="off" placeholder="请选择"
												class="el-input__inner">
											<!----><span class="el-input__suffix"><span
													class="el-input__suffix-inner"><i
														class="el-input__icon el-icon-arrow-down"></i>
												</span>
											</span>
										</div>
									</span>
								</span></label>
						</div>
						<div class="mr15"><label class="tit">院线：</label>
							<!----><label><label class="f13"
									style="visibility: hidden; position: absolute; top: -1000px; left: -1000px;"></label><span>
									<div role="tooltip" id="el-popover-5507" aria-hidden="true"
										class="el-popover el-popper single" tabindex="0"
										style="width: 240px; display: none;">
										<!---->
										<div class="el-tabs el-tabs--top">
											<div class="el-tabs__header is-top">
												<div class="el-tabs__nav-wrap is-top">
													<div class="el-tabs__nav-scroll">
														<div role="tablist" class="el-tabs__nav is-top"
															style="transform: translateX(0px);">
															<div class="el-tabs__active-bar is-top"
																style="width: 0px; transform: translateX(0px);"></div>
															<div id="tab-Line" aria-controls="pane-Line" role="tab"
																aria-selected="true" tabindex="0"
																class="el-tabs__item is-top is-active">按院线</div>
														</div>
													</div>
												</div>
											</div>
											<div class="el-tabs__content">
												<div role="tabpanel" id="pane-Line" aria-labelledby="tab-Line"
													class="el-tab-pane">
													<div class="mt10 el-input el-input--small el-input--suffix"
														style="width: 205px;">
														<!----><input type="text" autocomplete="off"
															placeholder="请输入院线关键字" class="el-input__inner">
														<!----><span class="el-input__suffix"><span
																class="el-input__suffix-inner"><svg aria-hidden="true"
																	class="svgIcon" style="font-size: 16px;">

																</svg>
															</span>
														</span>
													</div>
												</div>
											</div>
										</div>
									</div><span class="el-popover__reference-wrapper">
										<div class="curp el-input el-input--small el-input--suffix el-popover__reference"
											aria-describedby="el-popover-5507" tabindex="0" style="width: 100px;">
											<!----><input type="text" autocomplete="off" placeholder="请选择"
												class="el-input__inner">
											<!----><span class="el-input__suffix"><span
													class="el-input__suffix-inner"><i
														class="el-input__icon el-icon-arrow-down"></i>
												</span>
											</span>
										</div>
									</span>
								</span></label>
						</div>
						<div class="mr15"><label class="tit">影院：</label>
							<!----><label><label class="f13"
									style="visibility: hidden; position: absolute; top: -1000px; left: -1000px;"></label>
								<div class="el-select search el-select--small" style="max-width: 45vw; width: 135px;">
									<!---->
									<div class="el-input el-input--small el-input--prefix el-input--suffix">
										<!----><input type="text" readonly="readonly" autocomplete="off"
											placeholder="请输入影院名称" class="el-input__inner"><span
											class="el-input__prefix"><svg aria-hidden="true" class="svgIcon pr"
												style="font-size: 17px; top: -1px; left: -2px;">
												<!-- <use xlink:href="/img/svgIcon.847058fc.svg#Search"></use> -->
												<!---->
											</svg>
											<!---->
										</span><span class="el-input__suffix"><span class="el-input__suffix-inner"><i
													class="el-select__caret el-input__icon el-icon-"></i>
											</span>
											<!---->
										</span>
									</div>

								</div>
							</label>
						</div>
						<div class="mla"><label class="ml15 mr15"><span>
									<div role="tooltip" id="el-popover-6664" aria-hidden="true"
										class="el-popover el-popper" tabindex="0" style="width: 500px; display: none;">
										<section class="p5">
											<div class="mb10"><span class="gray">影片名称：</span>
												<div class="el-select search el-select--small">
													<div
														class="el-input el-input--small el-input--prefix el-input--suffix">
														<!----><input type="text" readonly="readonly" autocomplete="off"
															placeholder="请输入影片名称" class="el-input__inner"><span
															class="el-input__prefix"><svg aria-hidden="true"
																class="svgIcon" style="font-size: 18px;">

																<!---->
															</svg>
															<!---->
														</span><span class="el-input__suffix"><span
																class="el-input__suffix-inner"><i
																	class="el-select__caret el-input__icon el-icon-"></i>
															</span>
														</span>
													</div>

												</div>
											</div>
											<div>
												<p class="gray mt5 mb0">快速选择</p>
											</div>

										</section>
									</div>

									<el-popconfirm confirm-button-text='确定' cancel-button-text='重置' icon="el-icon-info"
										icon-color="red" title="你瞅啥!!!">">
										<el-button slot="reference">选择影片</el-button>
									</el-popconfirm>

								</span></label>
								
								<button type="button"
								class="el-button el-button--primary el-button--small">
								<!----><span>查询</span>
							</button></div>
					</div>
					<!---->
				</section>


			</div>
		</header>
		<div id="main" class="main" :style="{ width: '100%', height: '500px' }"></div>
		<div style="background-color: #fff; overflow: hidden;">
			<el-tabs @tab-click="handleClick" style="padding: 20px;">
				<div class="layout">
					<div class="layout-to" v-for="item in group" :key="item">
						排片分布列表（场次）
					</div>
				</div>
				<el-tab-pane label="">
					<el-table :data="video" style="width: 100%" :row-class-name="tableRowClassName" :stripe='true'>
						<el-table-column prop="Irank" label="排名" width="60" style="position: sticky;" />
						<el-table-column prop="MovieName" label="影片名称" width="180" style="color: #7030A0" />
						<el-table-column prop="ReleaseDay" label="上映天数" />
						<el-table-column prop="GenreMain" label="影片类型" width="120" />
						<el-table-column prop="ShowCount" label="总场次" width="120" />
						<el-table-column prop="ShowCountMoM" label="总场次环比" />
						<el-table-column prop="SwShowCount" label="上午场次" />
						<el-table-column prop="SwShowCountMoM" label="上午场次环比" />
						<el-table-column prop="XwShowCount" label="下午场次" />
						<el-table-column prop="XwShowCountMoM" label="下午场次环比" />
						<el-table-column prop="HjShowCount" label="黄金场次" />
						<el-table-column prop="HjShowCountMoM" label="黄金场次环比" />
						<el-table-column prop="JyShowCount" label="加映场次" />
						<el-table-column prop="JyShowCountMoM" label="加映场次环比" />
					</el-table>
				</el-tab-pane>
			</el-tabs>
			<!-- 分页 -->
			<!-- <el-pagination background layout="prev, pager, next" :total="94" @current-change="handleCurrentChange"
				@size-change="handleSizeChange" :current-page.sync="currentPage1" :page-size="10" :page-count="10">
			</el-pagination> -->
			<!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">
			</el-pagination> -->
		</div>
	</div>
</template>

<script>
	let echarts = require('echarts');
	import {
		GetVideo
	} from "@/api/video.js"
	export default {
		data() {
			return {
				// activeName: 'second',
				group: ["table0"],
				video: [],
				active: true,
				value1: "",
				currentPage1: 1,
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart();
			});
		},
		methods: {
			handleSizeChange(pageindex) {
				console.log(`每页 ${pageindex} 条`);
			},
			handleCurrentChange(pageindex) {
				console.log(`当前页: ${pageindex}`);
			},


			tableRowClassName({

				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},


			handleClick(tab, event) {
				console.log(tab, event);
				this.active = !this.active;
			},
			initChart() {
				let docElement = document.getElementById("main");
				let myChart = echarts.init(docElement);
				// 定义选项配置
				// 选项
				let option = {
					// 标题
					title: {
						text: "排片分布（场次）"
					},
					itemStyle: {
						barBorderRadius: 5,
						borderWidth: 1,
						borderType: 'solid',
						borderColor: '#73c0de',
						shadowColor: '#5470c6',
						shadowBlur: 3
					},
					color: [{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: '#6F77BC'
								}, // 设置颜色渐变
								{
									offset: 1,
									color: '#9EA8F6'
								}
							]
						},
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: '#FF515A'
								},
								{
									offset: 1,
									color: '#FFf'
								}
							]
						},
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: '#40BBC7'
								},
								{
									offset: 1,
									color: '#B2EBF1'
								}
							]
						},
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: '#F8CE8E'
								},
								{
									offset: 1,
									color: '#FBE7C8'
								}
							]
						}
					],
					// 工具提示
					tooltip: {},
					// 图例
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: ['独行月球', '断桥', '明日战记', '山海经之再见怪兽', '人生大事', '猎屠', '神探大战', '猪猪侠大电影', '漫长的告白', '迷你世界之觉醒']
					},
					yAxis: {

					},
					series: [{
							data: [12947, 9730, 5454, 4269, 1061, 1271, 671, 1844, 609, 651

							],
							type: 'bar',
							stack: 'x'
						},
						{
							data: [54236, 40051, 23841, 12916, 4711, 4049, 2906, 3238, 2240, 1728],
							type: 'bar',
							stack: 'x'
						},
						{
							data: [31527, 22950, 14926, 4545, 2518, 1815, 1570, 539, 1057, 353],
							type: 'bar',
							stack: 'x'
						},
						{
							data: [16320, 12767, 9969, 422, 1459, 1873, 1410, 9, 907, 22],
							type: 'bar',
							stack: 'x'
						},

					]
				};
				// 第三步 设置图表配置选项
				myChart.setOption(option);
				window.onresize = function() {
					myChart.resize();
				}
			},
		},
		created() {
			GetVideo({
				r: 0.6641584534192795,
				rowpiecetype: 1,
				datetype: 'Day',
				date: '2022-08-19',
				sdate: '2022-08-19',
				edate: '2022-08-19',
				pageindex: 1,
				pagesize: 10,
			}).then(res => {
				console.log(res.data.data.table0);
				this.video = res.data.data.table0
			})
		}
	};
</script>

<style scoped>
	.body {
		box-sizing: border-box;
		padding: 20px;
		background-color: #e4e4e4;
	}

	header {
		display: flow-root;
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		margin-bottom: 15px;
		padding: 15px;
		box-shadow: 0px 0px 10px -3px rgb(102, 101, 101);
	}

	.details-wrap .info,
	.panel {
		padding: 20px !important;
		background: #fff;
		box-shadow: 0 0 8px rgb(0 25 141 / 12%);
		border-radius: 2px;
	}

	.df {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
	}

	.mr15 {
		margin-right: 15px !important;
	}

	.tit {
		font-size: 13px;
		color: #454555;
	}

	.f13 {
		font-size: 13px !important;
	}

	.el-popover {
		padding: 15px;
		padding-top: 5px;
		position: absolute;
		background: #fff;
		min-width: 150px;
		border-radius: 4px;
		border: 1px solid #ebeef5;
		padding: 12px;
		z-index: 2000;
		color: #656565;
		line-height: 1.4;
		text-align: justify;
		font-size: 14px;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		word-break: break-all;
	}

	.el-input.el-input--small {
		line-height: 28px;
	}

	.el-input--small {
		font-size: 13px;
	}

	.el-input {
		position: relative;
		font-size: 14px;
		display: inline-block;
		width: 100%;
	}

	.el-popover .el-input .el-input__inner,
	.el-popover__reference-wrapper .el-input .el-input__inner {
		cursor: pointer;
	}

	.el-input.el-input--suffix .el-input__inner {
		padding-right: 22px;
	}

	.el-input--small .el-input__inner {
		height: 28px;
		line-height: 28px;
	}

	.el-input--suffix .el-input__inner {
		padding-right: 30px;
	}

	.el-input__inner {
		padding: 0 10px;
	}

	.el-input__inner {
		background-color: #fff;
		background-image: none;
		border-radius: 2px;
		border: 1px solid #dcdcdc;
		box-sizing: border-box;
		color: #656565;
		display: inline-block;
		font-size: inherit;
		height: 38px;
		line-height: 38px;
		outline: 0;
		padding: 0 15px;
		transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
		width: 100%;
	}


	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.content-header {
		display: flow-root;
		padding-left: 20px;
		margin: 20px 0;
		background-color: #fff;
	}

	.content-header>span {
		float: left;
		padding: 4px 24px;
		border: 1px solid #e0e4eb;
		cursor: pointer;
		font-size: 14px;
	}

	.content-header>span:last-of-type {
		border-left: none;
	}

	.main {
		padding-top: 20px;
		background-color: #fff;
	}

	.layout {
		width: 100%;
		height: 50px;
		background-color: #fff;
		display: flex;
		align-items: center;

	}

	.layout-to {
		width: 170px;
		height: 25px;
		border-left: 3px solid #7030A0;
		line-height: 25px;
		text-align: center;

	}



	.content-header {
		display: flow-root;
		padding-left: 20px;
		margin: 20px 0;
	}



	.zong {
		width: 100%;
		height: 100%;
		background-color: antiquewhite;
	}

	header,
	.content {
		box-shadow: 0px 0px 10px -3px rgb(102, 101, 101);
	}

	.content-header>span {
		float: left;
		padding: 4px 24px;
		border: 1px solid #e0e4eb;
		cursor: pointer;
		font-size: 14px;
	}

	.content-header>span:last-of-type {
		border-left: none;
	}

	.active {
		color: #fff;
		background-color: #7030a0;
	}

	.th1 {
		width: 30px;
	}

	.fan {
		margin: 0 auto;
	}
</style>
